<template>
  <section class="modlude">
    <el-form :inline="true" :model="formSearch" class="form_inline" label-width="80px" size="small">
      <el-form-item label="模板ID">
        <el-input v-model="formSearch.id" placeholder="请输入模板ID"></el-input>
      </el-form-item>
      <el-form-item label="模板名称">
        <el-input v-model="formSearch.name" placeholder="请输入模板名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="medium " @click="getlist">查 询</el-button>
        <el-button size="medium " @click="addDialog = true">新 增
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="formData" style="width: 100%" stripe>
      <!-- <el-table-column prop="id" label="模板唯一ID"></el-table-column> -->
      <el-table-column prop="name" label="模板名称"></el-table-column>
      <el-table-column prop="description" label="说明"></el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template slot-scope="scope">
          {{$root.getDateArray(scope.row.createTime)[9]}}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width=350>
        <template slot-scope="scope">
          <!-- v-if="$root.btnControl.find(item=>item=='edit')" -->
          <el-button type="warning" size="small" @click="xiangqing(2,scope.row)">修 改
          </el-button>
          <!-- v-if="$root.btnControl.find(item=>item=='delete')" -->
          <el-button type="danger" size="small" @click="deleInfor(scope.row.id)">删 除
          </el-button>
          <el-button type="" size="small" @click="xiangqing(3,scope.row)">详 情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <paging @changePage=handleCurrentPage :get-total='total'></paging>

    <!-- 添加 -->
    <el-dialog :title="isAddUpdata==1?'新增':isAddUpdata==2?'修改':'详情'" width="30%" :visible.sync="addDialog"
    @closed='closeadd' :close-on-click-modal="false">
      <div class="cont_box_right">
        <el-form label-width="110px" :model="formPush" ref='addList' :disabled="isAddUpdata==3?true:false">
          <el-form-item label="模板名称" :rules="[{ required: true, message: '该项不能为空', trigger: 'change' },{min:2,max:32,message:'内容长度需在2-32字符区间',trigger: 'change'}]" size="small"
            prop="name">
            <el-input v-model="formPush.name"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="description" size="small">
            <el-input  type="textarea" autosize v-model="formPush.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium " @click="closeadd">取 消</el-button>
        <el-button size="medium " v-if="isAddUpdata!=3" @click="addList">提 交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
  import paging from "../../components/paging"
  import {
    profileAdd, profileDelete, profileById, profileList, profileUpdate
  } from '../../url/api';

  export default {
    data() {
      return {
        addDialog: false,
        isAddUpdata: 1,
        formPush: {

        },
        formSearch: {
          page:{
            size: 10,
            current: 1,
          }
        },
        total: 0,
        formData: [],
      }
    },
    methods: {
      deleInfor(id){
        this.$confirm("确定执行此操作吗？", '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let params = {
               id:id
              }
              profileDelete(params).then((res) => {
                  if (res.data.ok) {
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    });
                    this.getlist();
                  }else{
                    this.$message({
                      message: res.data.message,
                      type: 'error'
                    });
                  }
                })
            })
      },
      closeadd() {
                this.formPush = {},
                this.$refs.addList.resetFields();
                this.isAddUpdata = 1
                this.addDialog = false;
                // this.disabled = false;
                // this.productvalue ={};
                // console.log("aaaaaa",this.productvalue);
            },
      xiangqing(index,row){
          this.isAddUpdata = index
          this.formPush = {
            name:row.name,
            description:row.description,
            id:row.id
          }
          this.addDialog= true
      },
      addList() {
        this.$refs.addList.validate((valid) => {
          if (valid) {
            // debugger
            // delete this.formPush.projectId
            this.$confirm("确定执行此操作吗？", '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let params = {
                name: this.formPush.name,
                description: this.formPush.description
              }
              if(this.isAddUpdata == 1){
                  profileAdd(params).then((res) => {
                  if (res.data.ok) {
                    this.$message({
                      message: '新增成功',
                      type: 'success'
                    });
                    this.getlist();
                  }else{
                    this.$message({
                      message: res.data.message,
                      type: 'error'
                    });
                  }
                  this.$refs.addList.resetFields();
                  this.addDialog = false
                })
              }else if(this.isAddUpdata == 2){
                params.id = this.formPush.id
                profileUpdate(params).then((res) => {
                  if (res.data.ok) {
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    });
                    this.getlist();
                  }else{
                    this.$message({
                      message: res.data.message,
                      type: 'error'
                    });
                  }
                  this.closeadd()
                  // this.addDialog = false
                })
              }
              
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      getlist() {
        profileList(this.formSearch).then((res) => {
          //console.log(res)
          if (res.data.ok == true) {
            this.formData = res.data.data.records
            this.total = res.data.data.total *1
          } else {
            this.$message(res.data.message);
          }
        })
      },
      handleCurrentPage(val) {
        this.formSearch.page.current = val
        this.getlist()
      }
    },
    mounted() {
      this.getlist();
    },
    components: {
      paging,
    }
  }
</script>
<style scoped>
  /* .cont_box {
    width: 100%;
    display: flex;
  }
  
  .cont_box_left, .cont_box_right {
    flex: 1;
    background: transparent;
    padding: 10px;
  }
  
  .cont_box_left {
    margin-right: 10px;
  }
  
  .margin10 {
    margin-bottom: 10px;
  }
  
  .marginRight {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .cont_box_right .el-form-item {
    margin-bottom: 20px;
  } */
</style>